★ 支線：地圖東南方林中村落 ↓↓↓

顯示道具屋位置圖

NPC [道具屋老闆]：
我這邊有各種樣式的空白彈，
在必要時，可以任意移開擋在前面的所有文字。

或許混合使用，會有特殊奇效。
哈哈，要不要多買一點啊！！！
算你便宜些？

★★★ 關卡條件 ↓↓↓

不換行與斷行 (white-space, word-break, overflow-wrap)

white-space

屬性決定如何處理元素內的空白字元，同時還能控制是否自動換行。

• normal
  連續的空白字元 (white-space) 會被合併 (collapse)，換行字元 (\n) 被視為空白字元。並可隨著容器縮放自動換行。
• nowrap
  與 normal 模式相同，相異地方在於，強制不換行。
• pre
  連續的空白字元與換行字元都會被保留 (preserve)，並強制不換行。功能與 HTML 中的 ＜pre> 元素相同。
• pre-wrap
  所有文本格式皆會被保留 (例 連續空白字元、換行字元等)，並可隨著容器縮放自動換行。
• pre-line
  與 pre-wrap 模式相同，相異地方在於，連續的空白字元會被合併。
• break-spaces
  與 pre-wrap 模式相同，卻有些許相異地方，尚未全面支援。[詳解更多]

註：可參考 MDN white-space 實作範例，更了解其規則。

word-break

屬性對於 CJK (中文 / 日文 / 韓文) 文本與 non-CJK文本，多國語言混和使用時，如何控制其換行規則。

• normal
  使用默認換行字元規則，允許 non-CJK 長單詞溢出。
• break-all
  CJK 符合一般換行規則。而對於 non-CJK，只要超出容器邊界，都將被強制拆行。例 incomprehensibility 或 is 長短單詞，皆在字母之間任意換行。
• keep-all
  CJK 文本如無任何換行符 (標點符號或空白字元等) 則強制不換行。non-CJK 文本表現同 normal 模式。

overflow-wrap（word-wrap）

屬性用於當一個長單詞 (incomprehensibility)，在獨自佔滿整行且產生溢出行為時，瀏覽器是否允許自動換行。(盡可能地保持避頭尾與避免強制斷行)

• normal
  只能在正常的空白字元處換行，否則允許長單詞溢出，顯示不換行。

• break-word
  當一個長單詞在獨自佔滿整行且產生溢出行為時，允許自動換行。

NPC [道具屋老闆]：
我沒說錯吧！！
各種情況下都能挑選到符合的。(
超得意樣 )

看你這麼有興趣，
我就再重點提示一下：

• 以上三種屬性皆可透過 <br> 元素強制斷行，以及不換行空格 ' ' 修改文本內容。
• word-break: break-word (屬性已棄用) 和 overflow-wrap: break-word (建議使用) 同等效用。
• 如想讓文本長單詞自動換行，可採用 overflow-wrap、word-break 或 hyphens [註1]。
• 針對「網址字串」建議使用 overflow-wrap: break-word。

[註1]：hyphens 屬性告知瀏覽器在換行時，如何透過連字符連接單詞，或讓瀏覽器可在適當的位置自動插入連字符。

｡:.ﾟヽ(*´∀`)ﾉﾟ.:｡
★ 觸發祕技：擠進推出避頭尾 (Kinsoku Method)

避頭尾是指在內文排版時，避免讓逗號、頓號、句號等表示語氣停頓的標點符號出現在行首，目的主要是為了讓讀者在換行接讀時的順暢性。現代文本常夾雜半形的英文或數字，再加上避頭尾的原則，行末難免會參差不齊。而為了左右齊行，只好把字距強制拉散或壓縮，導致於字距完全疏密不一。

而對於無避頭尾設定，是否還能保留閱讀順暢性呢？ 就留待你來解讀。

（註 圖片來源：台語漢字本聖經 局部文本 )

：夕陽依舊那麼美麗～
啊明天還是好天氣。

終於踏上未知旅程。

[ 追加經驗值 ]
註：參考來源 thetype 擠進推出避頭尾
徹底搞懂 word-break、word-wrap、white-space
關於 MDN 由 Mozilla Contributors 製作，以 CC-BY-SA 2.5 釋出。